<template>
  <div>
    <div id="change">
      <router-link :to="{ name: 'askDoctor' }">
        <van-icon name="arrow-left"
      /></router-link>
    </div>

    <div id="rep">
      <div id="reap">
        <h5>我的美悦问诊卡</h5>
        <span>提示</span>
      </div>
    </div>

    <div id="check">
      <h5>体质信息*</h5>
      <p>
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
      </van-dropdown-menu>
      </p>
       
       <p>
      <van-dropdown-menu>
        <van-dropdown-item v-model="value2" :options="option2" />
      </van-dropdown-menu>
      </p>

       <p>
        <van-dropdown-menu>
        <van-dropdown-item v-model="value3" :options="option3" />
      </van-dropdown-menu>
      </p>
       
       <p>
      <van-dropdown-menu>
        <van-dropdown-item v-model="value4" :options="option4" />
      </van-dropdown-menu>
      </p>
    </div>

    <div id="main">
    <h5>医美经历*(多选) </h5>
      <ul>
        <li v-for="i in 6" :key="i">鼻部</li>
      </ul>
    </div>

    <div id="tain">
    <h5>希望改善的部位*(多选) </h5>
      <ul>
        <li v-for="v in 6" :key="v">眼部</li>
      </ul>
    </div>
    <b href="#" class="btn">button</b>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: 0,
       value2: 'a',
      option1: [
        { text: '男', value: 0 },
        { text: '女', value: 1 },
      ],
       option2: [
        { text: '年龄', value: 'a' },
        { text: '>18', value: 'b' },
        { text: '<18', value: 'c' },
      ],
       value3: 11,
       value4: 'ab',
      option3: [
        { text: '身高', value: 11 },
        { text: '>170', value: 22 },
         { text: '<170', value: 22 },
      ],
       option4: [
        { text: '体重', value: 'ab' },
        { text: '>100', value: 'bb' },
        { text: '<100', value: 'cb' },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
#change {
  background-color: #f8f8f8;
}
#rep {
  height: 220px;
  width: 100%;
  background-color: #f8f8f8;
}
#reap {
  // margin-left: 30px;
  // margin-right: 30px;
  height: 220px;
  width: 90%;
  margin: auto;

  // background-color: blueviolet;
  span {
    display: block;
    margin-top: 26px;
    height: 140px;
    width: 100%;
    background-color: #cecece;
    text-align: center;
    line-height: 140px;
    font-size: 35px;
  }
}
#check {
  height: 300px;
  margin-left: 40px;
  background-color: white;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;

}
#check h5{
  width: 100%;
  height: 30px;
}
#check :nth-child(2){
  width: 45%;
}
#check :nth-child(3){
  width: 45%;
}
#check :nth-child(4){
  width: 45%;
}
#check :nth-child(5){
  width: 45%;
}

// main
#main {
  // background-color: #f6f6f6;
  h5 {
    height: 60px;
    width: 100%;
    padding-top: 10px;
    // background-color: #6c6c6c;
    font-size: 40px;
    margin-left: 33px;
  }
  ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      height: 60px;
      width: 180px;
      text-align: center;
      line-height: 60px;
      font-size: small;
      margin-left: 30px;
      margin-right: 30px;
      border-radius: 20px;
      margin-top: 20px;
      background-color: #cecece;
    }
  }
}

// tain
#tain {
  // background-color: #f6f6f6;
  margin-top: 20px;
  h5 {
    height: 60px;
    width: 100%;
    padding-top: 10px;
    // background-color: #6c6c6c;
    font-size: 40px;
    margin-left: 33px;
  }
  ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      height: 60px;
      width: 180px;
      text-align: center;
      line-height: 60px;
      font-size: small;
      margin-left: 30px;
      margin-right: 30px;
      border-radius: 20px;
      margin-top: 20px;
      background-color: #cecece;
    }
  }
}

// 按钮
.btn {
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 230px;
    height: 90px;
    line-height: 90px;
    text-align: center;
    color: #fff;
    font-size: 25px;
    text-transform: uppercase;
    cursor: pointer;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 60px;
  }

  .btn:hover {
    animation: animate 8s linear infinite;
  }

  @keyframes animate {
    0% {
      background-position: 0%;
    }

    100% {
      background-position: 400%;
    }
  }

  .btn::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    z-index: -1;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 40px;
    opacity: 0;
    transition: 0.5s;
  }

  .btn:hover::before {
    filter: blur(20px);
    opacity: 1;
    animation: animate 8s linear infinite;
  }
 




</style>
